<template>
  <el-card class="box-card">
    <div class="card-title">
      <span>修改密码</span>
    </div>
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm"
      border>
      <el-form-item label="原密码" prop="oldPassword">
        <el-input v-model="ruleForm.oldPassword" type="password" autocomplete="off" placeholder="请输入原密码" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="ruleForm.newPassword" type="password" autocomplete="off" placeholder="请输入新密码" />
      </el-form-item>
      <el-form-item label="确认新密码" prop="newPassword">
        <el-input v-model="ruleForm.newPassword" type="password" autocomplete="off" placeholder="请确认新密码" />
      </el-form-item>
      <p>
        <el-button type="primary" @click="submitForm(ruleFormRef)" size="small">修改</el-button>
        <el-button @click="resetForm(ruleFormRef)" size="small">重置</el-button>
      </p>
    </el-form>
  </el-card>

</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElButton, ElCard, ElForm, ElFormItem, ElInput, FormInstance } from 'element-plus'
import { post } from '@/untils/request';
import { useRouter } from "vue-router"//引入路由
import { ElMessage } from 'element-plus'//引入消息弹出框

const router = useRouter()
const ruleFormRef = ref<FormInstance>()
//表单非空验证
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入原密码'))
  } else {
    callback()
  }
}
const validateNewpassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入新密码'))
  } else {
    callback()
  }
}

//表单数据
const ruleForm = reactive({
  oldPassword: '',//原密码
  newPassword: '',//新密码
})
//表单规则
const rules = reactive({
  oldPassword: [{ validator: validatePassword, trigger: 'blur' }],
  newPassword: [{ validator: validateNewpassword, trigger: 'blur' }]
})
//提交修改密码
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      let passsIfo = {
        _gp: 'admin',
        _mt: 'newPassword',
        ...ruleForm
      }
      post(passsIfo).then(res => {
        let { errmsg, errno } = res
        if (200 == errno) {
          console.log(res, '修改密码数据');
          let path = router.currentRoute.value.fullPath
          router.replace({ path: "/login", query: { back: path } })//登录后需要跳回的地址
        } else {
          ElMessage.error(errmsg)
        }
      }).catch(err => {
        console.log(err);
      })
    } else {
      console.log('error submit!')
      return false
    }
  })
}
//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style scoped lang="less">
.el-card__header {
  border-bottom: none !important;
  border: 0px !important;
}

.card-title {
  text-align: center;
  border-bottom: none !important;
  margin-bottom: 20px;
  font-size: 20px;
}

.box-card {
  width: 80%;
  margin: auto;
  text-align: center;
  border-radius: 10px;
  box-shadow: none;

  .el-button {
    padding: 13px 14px;
  }
}
</style>